<template>
  <div id="app">
    <!-- 微信小程序开发 -->
    <div class="weixin">
      <div class="pcnav"><topnav></topnav></div>
      <div class="phonenav"><phonenav></phonenav></div>
      <div class="weinxin-mind">
        <div class="mind-left">
          <h1>微信<br />小程序应用开发</h1>
          <p>
            小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可<br />
            及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即<br />
            走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在,<br />
            随时可用，但又无需安装卸
          </p>
          <a href="#">了解详情</a>
        </div>
        <div class="mind-right">
          <img src="@/assets/image/Service/sever_03.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 微信小程序开发 -->

    <!-- 电商平台 -->
    <div class="online" id="ser2">
      <div class="online-background">
        <img :src="onlineL" alt="" style="width: 100%; height: 100%" />
      </div>
      <div class="online-mind">
        <div class="online-mind-left">
          <h1>电商平台开发</h1>
          <p>
            如果你想做个电商网站，进行线上销售产品，或结合门店综合一体模<br />
            式，那么电商平台网站将完成一些你想要的功能。
          </p>
          <p class="tedian">
            <span>商城网站开发</span>
            <span>大型门户建设</span>
          </p>
          <a href="#">案例</a>
        </div>
        <div class="online-mind-right">
          <img src="@/assets/image/Service/sever_07.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 电商平台 -->

    <!-- 企业官网设计 -->
    <div class="weixin" style="background: #f66f01" id="ser1"> 
      <div class="weinxin-mind" style="padding: 240px 0">
        <div class="mind-left">
          <h1>企业官网建设</h1>
          <p>
            我们踏入互联网行业的时候就是主要以企业官网为主，我们服务了很<br />
            多企业，对于项目的把控和质量，都已非常熟悉。
          </p>
          <p class="tedian">
            <span>品牌网站建设</span>
            <span>中小企业网站建设</span>
            <span>网站改版</span>
          </p>
          <a href="#">案列</a>
        </div>
        <div class="mind-right">
          <img src="@/assets/image/Service/sever_11.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 企业官网设计 -->

    <!-- 营销网站建设 -->
    <div
      class="weixin"
      style="background: linear-gradient(to bottom, #03b99e 0%, #046d82 100%)"
    >
      <div class="weinxin-mind" style="padding: 240px 0">
        <div class="mind-left">
          <h1>营销网站建设</h1>
          <p>
            如果你正准备投放一期活动，那么营销页可以说是相对比较好的选<br />
            择，我们认为做整体营销的思路和体验是引导用户不断往下了解下<br />
            去，让更多好的页面信息得到真正订单的转换。
          </p>
          <p class="tedian">
            <span>推广营销页设计制作</span>
            <span>营销方案</span>
          </p>
          <a href="#">案列</a>
        </div>
        <div class="mind-right">
          <img src="@/assets/image/Service/sever_15.png" alt="" />
        </div>
      </div>
    </div>
    <last></last>
    <location></location>
    <!-- 营销网站建设 -->
  </div>
</template>

<script>
import last from "@/components/Last.vue";
import topnav from "@/components/Topnav.vue";
import location from "@/components/Location.vue";
import phonenav from "@/components/Phone_nav.vue";
export default {
  data() {
    return {
      onlineL: require("@/assets/image/Service/sever_landi.jpg"),
    };
  },
   watch: {
    $route() {      
      let port = this.$route.query.port;
      let selector = "#" + port;
      this.jump(selector)
    },
  },
  mounted() {
    let port = this.$route.query.port;
    if (port) {
      let selector = "#" + port;
      this.jump(selector);
    }
  },
  methods: {
    jump(selector) {
      let anchor = this.$el.querySelector(selector);
      anchor.scrollIntoView();
    },
  },
  components: {
    last,
    topnav,
    location,
    phonenav
  },
};
</script>

<style scoped lang="less">
/* 微信小程序开发 */
.pcnav {
  padding-top: 30px;
}
.phonenav {
  display: none;
}
.weixin {
  width: 100%;
  height: auto;
  background: #0ba715;
}
.weinxin-mind {
  width: 1100px;
  height: auto;
  margin: auto;
  display: flex;
  padding: 80px 0;
}
.weinxin-mind > div {
  /* border: 1px solid red; */
  flex-grow: 1;
}
.mind-right {
  display: table-cell;
  /* text-align: center; */
  vertical-align: middle;
  text-align: center;
}
.mind-left a {
  display: block;
  width: 240px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  margin-top: 50px;
  border-radius: 10px;
  text-decoration: none;
}
.mind-left h1,
p {
  color: #fff;
}
.mind-left h1 {
  font-size: 48px;
}
.mind-left p {
  font-size: 18px;
  line-height: 30px;
}
.mind-left a:hover {
  background-color: #fff;
  color: #0ba715;
}
/* 微信小程序开发 */

/* 电商 */

.online {
  width: 100%;
  height: auto;
}
.online-background {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
}
.online-mind {
  width: 1100px;
  height: auto;
  margin: auto;
  display: flex;
  padding: 160px 0 80px;
}
.online-mind > div {
  /* border: 1px solid red; */
  flex-grow: 1;
}
.online-mind-right {
  display: table-cell;
  /* text-align: center; */
  vertical-align: middle;
  text-align: center;
}
.online-mind-left a {
  display: block;
  width: 240px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  margin-top: 50px;
  border-radius: 10px;
  text-decoration: none;
}
.online-mind-left h1,
p {
  color: #fff;
}
.online-mind-left h1 {
  font-size: 48px;
}
.online-mind-left p {
  font-size: 18px;
  line-height: 30px;
}
.online-mind-left a:hover {
  background-color: #fff;
  color: #0ba715;
}
.tedian span {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 14px;
  margin: 0px 20px 0px 10px;
}
.tedian span::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  z-index: 2;
  left: -12px;
  top: 11px;
}

/* 电商 */

@media screen and (max-width: 1100px) {
  .pcnav {
    display: none;
  }
  .phonenav {
    display: block;
  }
  /* 微信手机端 */
  .mind-right {
    display: none;
  }
  .weixin {
    width: 100%;
  }
  .weinxin-mind {
    width: 80%;
    margin: auto;
  }
  /* 电商手机端 */
  .online-mind-right {
    display: none;
  }
  .online {
    width: 100%;
  }
  .online-mind {
    width: 80%;
    margin: auto;
  }
}

body {
  padding: 0;
  margin: 0;
}
</style>